<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生表格</title>
    <style>
        table {
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 5px 10px;
            text-align: center;
        }
    </style>
</head>
<body>
<script>
    let students = [
        { id:"s01", name: "张三", age: 23, addr: "北京"},
        { id:"s02", name: "李四", age: 24, addr: "上海"},
        { id:"s03", name: "王五", age: 25, addr: "曹县"}
    ];

    function createTable() {
        let table = document.createElement("table");

        let header = table.insertRow();
        ["ID", "姓名", "年龄", "地址", "操作"].forEach(text => {
            let th = document.createElement("th");
            th.innerText = text;
            header.appendChild(th);
        });

        return table;
    }

    function createButton(){
        let button = document.createElement("button");
        button.innerText = "添加";
        button.onclick = function () { let id = prompt("请输入学生ID：");
            if (!id) return;

            let name = prompt("请输入学生姓名：");
            if (!name) return;

            let age = +prompt("请输入学生年龄：");{}
            if (isNaN(age) || age <= 0) {
                alert("年龄输入不正确！");
                return;
            }

            let addr = prompt("请输入学生地址：");
            if (!addr) return;

            students.push({ id, name, age: +age, addr });

            renderTable(table, students);

        };

        document.body.appendChild(button);
    }
    function renderTable(table, data) {
        while (table.rows.length > 1) {
            table.deleteRow(1);
        }

        data.forEach((stu, index) => {
            let row = table.insertRow();

            Object.values(stu).forEach(value => {
                let cell = row.insertCell();
                cell.innerText = value;
            });


            let actionCell = row.insertCell();

            let delBtn = document.createElement("button");
            delBtn.innerText = "删除";
            delBtn.onclick = () => {
                if (confirm("确定要删除这条数据吗？")) {
                    data.splice(index, 1);
                    renderTable(table, data);
                }
            };


            let editBtn = document.createElement("button");
            editBtn.innerText = "修改";
            editBtn.onclick = () => {
                let newName = prompt("请输入新的姓名：", stu.name);
                if (newName === null) return;

                let newAge = +prompt("请输入新的年龄：", stu.age);

                if (isNaN(newAge) || newAge <= 0) {
                    alert("年龄输入不正确！");
                    return;
                }
                let newAddr = prompt("请输入新的住址：", stu.addr);
                if (newAddr === null) return;

                data[index].name = newName;
                data[index].age = +newAge;
                data[index].addr = newAddr;
                renderTable(table, data);
            };


            actionCell.appendChild(delBtn);
            actionCell.appendChild(editBtn);
        });
    }


    let table = createTable();
    document.body.appendChild(table);
    renderTable(table, students);
    createButton();
</script>
</body>
</html>
